<template>

  <div>
      <div class="banner"><swiperDemo></swiperDemo></div>
     <div class="content">
      <router-link  :to="{path:'/myVideo',query:{title:item.title,context:item.context,id:item.id,imgSrc:item.imgSrc,videoSrc:item.videoSrc}}"  :key="item.id" v-for="item in searchs"  class="box">
          <!-- <myContent :title="item.title" :context="item.context"></myContent> -->
          <foundation :title="item.title" :context="item.context" :imgSrc="'http://localhost:8889'+'/'+item.imgSrc+'.jpg'"></foundation>
          
        </router-link>   
     </div>
        
      </div>
  
  
  </template>
  

  <script>
  
import foundation from "../components/foundation.vue"
import swiperDemo from "./swiperDemo.vue"
  export default{
    components:{
       foundation,
       swiperDemo
    },
    data(){
       return {
          dataArr:[
       
       ]


      }
       
    },
    created()
    {
      this.$axios.get(this.$host+"/Blood").then(res=>{
            this.dataArr=res.data
            // console.log(res.data)
      })
    },
   computed:{
      searchs(){
             if(this.inputValue!=""){
               return this.dataArr.filter(value=>{
                   return value.title.indexOf(this.$store.state.movie.searchValue)!==-1 
               })
              

             }else{
               return this.dataArr
             }

              
          
            //  if(this.inputValue==""){
            //      return this.dataArr
            //  }
            // return this.dataArr.filter((value)=>{
            //      return value.title.indexOf(this.$store.state.movie)!==-1
                
            // }) 
         },
        

    }
  
  
  }
  
  
  </script>
  
  
  <style scoped>
     a{
        text-decoration: none;
        color: blue;
    }
    
    .box{
      margin-left:30px;
      margin-top: 80px;
    }
  
  .banner{
       margin-top: 60px;
    }
    
    .content{
       display: flex;
       flex-wrap: wrap;
       justify-content: space-around;
       margin-top: 50px;
    
    }
    
  
  
  </style>